<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;

        }

        [class^=item] {
            width: 280px;
            height: 370px;
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
        }

        [class^=txt] {
            color: #fff;
            position: absolute;
        }

        .txt01 {
            top: -20px;
            left: 10px;

        }

        .txt02 {
            bottom: 70px;
            left: -80px;


        }

        .txt03 {
            bottom: -43px;
            left: 10px;


        }

        [class^=item]:hover .txt01 {
            animation: itemTxt01 2s ease-in-out 1 alternate;
            animation-fill-mode: forwards;
        }

        [class^=item]:hover .txt02 {
            animation: itemTxt02 2s ease-in-out 1 alternate;
            animation-fill-mode: forwards;
        }

        [class^=item]:hover .txt03 {
            animation: itemTxt03 2s ease-in-out 1 alternate;
            animation-fill-mode: forwards;
        }


        @keyframes itemTxt01 {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(260px);
            }

        }

        @keyframes itemTxt02 {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(90px);
            }

        }

        @keyframes itemTxt03 {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-60px);
            }

        }


        .item01 {
            background-image: url(https://oss.9ihub.com/test/hover1.jpg);
        }

        .item02 {
            background-image: url(https://oss.9ihub.com/test/hover2.jpg);
        }

        .item03 {
            background-image: url(https://oss.9ihub.com/test/hover3.jpg);
        }

        .item04 {
            background-image: url(https://oss.9ihub.com/test/hover4.jpg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item01">
            <div class="txt01">《大鱼》</div>
            <div class="txt02">演唱：周深</div>
            <div class="txt03">海浪无声将夜幕深深淹没，漫过天空<br>尽头的角落</div>
        </div>
        <div class="item02">
            <div class="txt01">《大鱼》</div>
            <div class="txt02">演唱：周深</div>
            <div class="txt03">海浪无声将夜幕深深淹没，漫过天空<br>尽头的角落</div>
        </div>
        <div class="item03">
            <div class="txt01">《大鱼》</div>
            <div class="txt02">演唱：周深</div>
            <div class="txt03">海浪无声将夜幕深深淹没，漫过天空<br>尽头的角落</div>
        </div>
        <div class="item04">
            <div class="txt01">《大鱼》</div>
            <div class="txt02">演唱：周深</div>
            <div class="txt03">海浪无声将夜幕深深淹没，漫过天空<br>尽头的角落</div>
        </div>
    </div>

</body>

</html>